<template>
  <view>
    <uv-popup
      ref="popup"
      @change="change"
      :closeable="true"
      custom-style="border-radius:15rpx; "
      :closeOnClickOverlay="false"
    >
      <view class="wrap">
        <text class="tit">{{ title }}</text>

        <view class="content">
          <slot></slot>
        </view>

        <view class="btnBox flex flex-justify-between">
          <uv-button shape="circle" :custom-style="{ width: '200rpx' }" @click="cancel">
            <span style="font-size: 31rpx"> 取消 </span>
          </uv-button>
          <uv-button
            shape="circle"
            :custom-style="{ width: '200rpx' }"
            color="#00754A"
            @click="confirm"
          >
            <span style="font-size: 31rpx"> 确定 </span>
          </uv-button>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script lang="ts" setup>
//

const props = defineProps({
  title: String,
});

const emits = defineEmits(['confirm', 'cancel'])

const popup = ref(null);
const open = () => {
  popup.value.open("center");
};

const cancel = () => {
  emits('cancel')
  close()
};
const confirm = () => {
  emits('confirm')
};

const close = ()=>{
  popup.value.close()
}
const change = () => {};

defineExpose({ open ,close});
</script>

<style lang="scss" scoped>
//
.wrap {
  width: 73vw;
  padding: 0 40rpx 40rpx;
  box-sizing: border-box;
  min-height: 360rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  .tit {
    font-weight: 600;
    font-size: 31rpx;
    color: #000000;
    line-height: 100rpx;
    height: 100rpx;
  }

  .content {
    flex: 1;
    margin: 10rpx 0;
  }

  .btnBox {
    width: 100%;
    height: 75rpx;
  }
}
</style>
